<template>
	<view class="container">
		<u--form labelPosition="left" labelWidth="200rpx" :model="model" :rules="rules" ref="uForm">
			<u-form-item label="发往仓库" prop="send" borderBottom @click="show = true">
			<u--input disabled border="none" disabledColor="none" v-model="model.send" ></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="收货仓库" prop="take" borderBottom @click="show1 = true">
			<u--input disabled border="none" disabledColor="none" v-model="model.take" ></u--input>	
			<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<view class="sub">
				<u-subsection :list="list" :current="curNow" @change="sectionChange" mode="button" bgColor="#E99D42"></u-subsection>
			</view>
			<u-form-item label="快递单号" prop="number" borderBottom>
				<u-icon slot="right" name="scan" size="26px"></u-icon>
			<u--input v-if="curNow==0" placeholder="请输入快递单号" border="none" disabledColor="none" ></u--input>
			<u-textarea v-else placeholder="请输入快递单号，每行一个" autosize></u-textarea>
			</u-form-item>
			<u-form-item v-if="curNow==0" label="包裹类型" prop="type" borderBottom @click="show2 = true">
			<u--input disabled placeholder="请选择包裹类型" border="none" disabledColor="none" v-model="model.type" ></u--input>	
			<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item v-if="curNow==0" label="购买平台" prop="shop" borderBottom @click="show3 = true">
			<u--input disabled placeholder="请选择购买平台" border="none" disabledColor="none" v-model="model.shop" ></u--input>	
			<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="包裹备注" prop="descr" borderBottom>
			<u--input placeholder="如:请轻拿轻放" border="none" disabledColor="none" ></u--input>
			</u-form-item>
			<u-form-item label="订单图片" prop="picture" borderBottom>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
			</u-form-item>
			<u-form-item label="抽真空服务" borderBottom>
			<u-switch v-model="model.server" activeColor="#E99D42"slot="right"></u-switch>
			<p style="font-size: 14px;color: gray;text-align: right;margin-right: 10rpx;">注：收费￥5.00/件</p>
			</u-form-item>
			<u-form-item label="拆箱检查违禁品" borderBottom>
			 <u-switch disabled v-model="model.inspect" activeColor="#E99D42" slot="right"></u-switch>
			</u-form-item>
		</u--form>
		<view class="foot">
			<u-checkbox-group size="20" shape="circle" activeColor="#4293F5">
				<u-checkbox size="17" shape="circle" activeColor="#FEC846"  :checked="checked">
			    </u-checkbox>
				<text class="text_8">已阅读并同意《集运协议》</text>
			</u-checkbox-group>
			<button type="primary" style="background-color: #E99D42;margin-top:20px;">提交</button>
		</view>
		<u-action-sheet :show='show' :actions="actions" title="请选择发往仓库" @close="show=false" @select="select">
		</u-action-sheet>
		<u-action-sheet :show='show1' :actions="actions1" title="请选择收货仓库" @close="show1=false" @select="select1">
		</u-action-sheet>
		<u-action-sheet :show='show2' :actions="actions2" title="请选择包裹类型" @close="show2=false" @select="select2">
		</u-action-sheet>
		<u-action-sheet :show='show3' :actions="actions3" title="请选择购物平台" @close="show3=false" @select="select3">
		</u-action-sheet>
	</view>
</template>

<script>
  export default {
    data() {
      return {
		 show: false,
		 show1:false,
		 show2:false,
		 show3:false,
		 model:{ 
			 send:'',
			 take:'',
			 number:'',
			 type:'',
			 shop:'',
			 descr:'',
			 picture:'',
			 server:'',
			 inspect:''
		 },
		 fileList1: [],
		 checked:false,
		 actions:[{
			 name:'河南省郑州市金水区百脑汇1515'
		 }],
		 actions1:[{
		 			 name:'美国收货地址'
		 }],
		 actions2:[{
			 name:'普货'
		 },{
			 name:'敏货'   
		 }],
		 actions3:[{
		 			 name:'淘宝'
		 },{
		 			 name:'京东'   
		 },{
		 			 name:'拼多多'   
		 }],
		list: ['单个登记', '批量登记'],
		curNow:0,
		 rules:{
			 'send':{required:true,message:'请选择发往仓库地址',trigger:['blur','change']},
			 'take':{required:true,message:'请选择收货仓库地址',trigger:['blur','change']},
			 'number':{required:true,message:'请输入快递单号',trigger:['blur','change']},
			 'type':{required:true,message:'请选择包裹类型',trigger:['blur','change']},
			 'shop':{required:true,message:'请选择购物平台',trigger:['blur','change']},
		 }
      }
    },
    methods: {
		select(e){
			this.model.send=e.name;
			this.$refs.uForm.validateField('send');
		},
		select1(e){
			this.model.take=e.name;
			this.$refs.uForm.validateField('take');
		},
		select2(e){
			this.model.type=e.name;
			this.$refs.uForm.validateField('type');
		},
		select3(e){
			this.model.shop=e.name;
			this.$refs.uForm.validateField('shop');
		},
		sectionChange(index) {
			this.curNow = index;
			console.log(index);
					},
		// // 删除图片
					deletePic(event) {
						this[`fileList${event.name}`].splice(event.index, 1)
					},
					// 新增图片
					async afterRead(event) {
						// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
						let lists = [].concat(event.file)
						let fileListLen = this[`fileList${event.name}`].length
						lists.map((item) => {
							this[`fileList${event.name}`].push({
								...item,
								status: 'uploading',
								message: '上传中'
							})
						})
						for (let i = 0; i < lists.length; i++) {
							const result = await this.uploadFilePromise(lists[i].url)
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: result
							}))
							fileListLen++
						}
					},
					uploadFilePromise(url) {
						return new Promise((resolve, reject) => {
							let a = uni.uploadFile({
								url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
								filePath: url,
								name: 'file',
								formData: {
									user: 'test'
								},
								success: (res) => {
									setTimeout(() => {
										resolve(res.data.data)
									}, 1000)
								}
							});
						})
					},
    },
	onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	    	this.$refs.uForm.setRules(this.rules)
	    },
  }
</script>

<style lang="scss">
.container{
	width: 95%;
	margin: auto;
}
.sub{
	background-color: #CECECE;
	border: 1px solid gray;
}
  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
  .foot{
	  margin-top: 15px;
  }
</style>
